<template>
  <div class="id-photo">
    <section class="id-photo-promo-section bg-gradient-to-br from-slate-50 via-sky-100 to-slate-200 text-slate-800 py-16 md:py-24 px-4 overflow-hidden">
      <div class="container mx-auto max-w-6xl relative">
        <div class="flex flex-col md:flex-row items-center gap-8 md:gap-12">
          <!-- Text Content -->
          <div class="md:w-1/2 text-center md:text-left">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight text-slate-900">
              AI智能<span class="text-transparent bg-clip-text bg-gradient-to-r from-blue-600 to-indigo-700">证件照</span>制作
            </h1>
            <p class="text-lg md:text-xl text-slate-700 mb-8">
              一键制作护照、身份证、各类考试等标准证件照。支持智能调整尺寸、更换背景底色，轻松生成专业合规的高清证件照。
            </p>
            <router-link to="/process/idphoto" class="inline-block bg-indigo-600 hover:bg-indigo-500 text-white font-semibold py-3 px-10 rounded-lg text-lg shadow-[0_0_15px_rgba(79,70,229,0.4)] hover:shadow-[0_4px_25px_rgba(79,70,229,0.5)] transition-all duration-300 ease-in-out transform hover:scale-105">
              立即体验
            </router-link>
            <p class="mt-4 text-sm text-slate-500">可拖入文件、粘贴图片</p>
          </div>

          <!-- Image Showcase -->
          <div class="md:w-1/2 relative mt-10 md:mt-0">
            <!-- Decorative Blobs/Glows (Simplified) -->
            <div class="absolute -top-16 -right-16 w-80 h-80 bg-sky-300 rounded-full opacity-20 blur-3xl animate-pulse-slow"></div>
            <div class="absolute -bottom-16 -left-16 w-80 h-80 bg-indigo-300 rounded-full opacity-20 blur-3xl animate-pulse-slow animation-delay-2000"></div>

            <div class="relative z-10 flex flex-col items-center">
              <!-- Main Showcase Image -->
              <div class="bg-white p-2 rounded-xl shadow-2xl mb-4 transform transition-all duration-500 hover:scale-105 w-52 md:w-64 border border-gray-200">
                <img src="/src/assets/id-photo-origin.jpg" alt="专业证件照示例" class="rounded-lg w-full h-auto object-cover">
              </div>
              <!-- Thumbnail Grid -->
              <div class="grid grid-cols-3 gap-2 md:gap-3 w-full max-w-sm">
                <div class="bg-red-500 p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="红底证件照" class="w-full h-full object-contain rounded-sm">
                </div>
                <div class="bg-white p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="白底证件照" class="w-full h-full object-contain rounded-sm">
                </div>
                <div class="bg-blue-500 p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="蓝底证件照" class="w-full h-full object-contain rounded-sm">
                </div>
                <div class="bg-green-500 p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="绿底证件照" class="w-full h-full object-contain rounded-sm">
                </div>
                <div class="bg-gray-100 p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="专业证件照男" class="w-full h-full object-contain rounded-sm">
                </div>
                <div class="bg-gray-400 p-0 rounded-md shadow-lg transform transition-all duration-300 hover:scale-110 hover:shadow-xl aspect-square">
                  <img src="/src/assets/id-photo.png" alt="灰底证件照" class="w-full h-full object-contain rounded-sm">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script setup lang="ts">

</script>

<style scoped>

</style>